<template>
	<view class="container">
		<view class="card-box">
			<view class="card-title">农户信息</view>
			<view class="card-content">
				<view class="rows f-a-center">
					<view class="label">卖姜农户：</view>
					<view class="value">{{info.seller}}</view>
				</view>
				<view class="rows f-a-center">
					<view class="label">农户电话：</view>
					<view class="value">{{info.seller_mobile}}</view>
				</view>
			</view>
		</view>

		<view class="card-box">
			<view class="card-title">过磅信息</view>
			<view class="card-content">
				<view class="rows f-a-center">
					<view class="label">过磅时间：</view>
					<view class="value">{{info.createtime_text}}</view>
				</view>
				<view class="rows f-a-center">
					<view class="label">过磅重量：</view>
					<view class="value">{{info.weight_num}}kg</view>
				</view>
				<view class="rows f-a-center">
					<view class="label">过磅费用：</view>
					<view class="value">{{info.fee}}元</view>
				</view>
				<view class="rows f-a-center">
					<view class="label">去水重量：</view>
					<view class="value">{{info.water||0}}kg</view>
				</view>

				<view class="rows f-c-between">
					<view class="f-a-center" style="flex:1">
						<view class="label">回皮重量：</view>
						<view v-if="showEditInput" class="input-row f-c-between">
							<input type="number" v-model="tareVal" placeholder="请输入回皮重量" class="tare-input" />
							<view>kg</view>
						</view>
						<template v-else>
							<view v-if="parseFloat(info.tare)==0" class="value not-value">未回皮</view>
							<view v-else class="value">{{info.tare}}kg</view>
						</template>
					</view>
					<button v-if="showEditInput" class="btn-edit btn-sure" @click="sureTareBtn">确定</button>
					<button v-else class="btn-edit" @click="showEditInput=true">修改</button>
				</view>

				<view class="rows f-a-center">
					<view class="label">生姜重量：</view>
					<view class="value">{{info.jingzhong}}kg</view>
				</view>
			</view>
		</view>

		<view class="card-box">
			<view class="card-title">收购信息</view>
			<view class="card-content">
				<view class="rows f-a-center">
					<view class="label">约定单价：</view>
					<view class="value">{{info.unit_price}}元/kg</view>
				</view>
				<view class="rows f-a-center">
					<view class="label">约定总价：</view>
					<view v-if="parseFloat(info.tare)==0" class="value not-value">请回皮后查看总价</view>
					<view v-else class="value">{{info.total_price}}元</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: null,
				info: {},
				showEditInput: false,
				tareVal: '', //回皮重量
			}
		},
		onLoad({
			id
		}) {
			this.id = id
			this.getWeightInfo()
		},
		methods: {
			//获取详情
			getWeightInfo() {
				this.$api.get_wight_info({
					id: this.id
				}).then(res => {
					this.info = res || {}
				})
			},

			//提交回皮
			sureTareBtn() {
				if (!this.$u.test.number(this.tareVal)) {
					this.$showToast('数据格式错误')
					return
				}
				this.$api.post_weigh_huipi({
					id: this.info.id,
					tare: this.tareVal
				}).then(res => {
					this.$showToast('提交成功')
					this.showEditInput = false
					this.tareVal = ''
					this.getWeightInfo()
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F4F5F7;
	}
</style>
<style lang="scss" scoped>
	.container {
		padding: 20rpx 15rpx 50px;

		.card-box {
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 0 32rpx;
			margin-bottom: 28rpx;

			.card-title {
				font-weight: 500;
				// font-size: 28rpx;
				font-size: calc(28rpx * 1.4);
				color: #333333;
				padding: 20rpx 0 16rpx;
				border-bottom: 1px solid #d6d6d6;
			}

			.card-content {
				padding-top: 22rpx;

				.rows {
					font-weight: 400;
					// font-size: 28rpx;
					font-size: calc(28rpx * 1.4);
					color: #3C3832;
					padding-bottom: 28rpx;

					.label {
						white-space: nowrap;
					}

					.input-row {
						flex: 1;
						padding-left: 32rpx;
						padding-right: 10rpx;

						.tare-input {
							flex: 1;
							font-size: calc(28rpx * 1.4);
							color: #FFC046;
						}
					}

					.value {
						font-weight: 400;
						// font-size: 28rpx;
						font-size: calc(28rpx * 1.4);
						color: #333333;
						margin-left: 32rpx;

						&.not-value {
							color: #FF5656;
						}
					}
				}

				.btn-edit {
					padding: 4rpx 22rpx;
					font-size: calc(28rpx * 1.4);
					line-height: 1.2;
					color: #FFFFFF;
					background: #FF5656;
					border-radius: 50rpx;
					white-space: nowrap;
					box-sizing: border-box;

					&.btn-sure {
						background-color: #FFC046;
					}
				}
			}
		}
	}
</style>